
<template>
  <!--npm包screenfull 用于跨浏览器使用JavaScript全屏API的简单包装器 -->
  <div>
    <svg-icon
      :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
      @click="handleClick" />
  </div>
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance, onMounted, ref } from 'vue'
//<!--npm包screenfull 用于跨浏览器使用JavaScript全屏API的简单包装器 -->
import screenfull from 'screenfull'


/**
 * screenful 文档说明
 * https://www.npmjs.com/package/screenfull
 */

export default defineComponent({
  name: 'ScreenFull',
  setup() {
    const { proxy } = getCurrentInstance()!
    //TODO: 上面是文档中的用法，解构出的proxy应该是一个使用proxy代理后的vue实例，下面这个proxy就是vue实例本身
    // const proxy = getCurrentInstance()
    // console.log(getCurrentInstance(), 'getCurrentInstance');

    const isFullscreen = ref(false)
    const handleClick = () => {
      if (screenfull.isEnabled) { // 浏览器是否允许全屏模式
        screenfull.toggle()
        return
      }
      return proxy?.$message({
        message: 'you browser can not work',
        type: 'warning'
      })
    }
    const change = () => {
      // 更新当前全屏状态 根据状态切换对应图标
      // isFullscreen.value = (screenfull as Screenfull).isFullscreen
      isFullscreen.value = (screenfull).isFullscreen
    }
    const init = () => {
      //
      if (screenfull.isEnabled) { // 浏览器是否允许全屏模式
        // 监听全屏切换状态
        screenfull.on('change', change)
      }
    }
    onMounted(() => {
      init()
    })
    return {
      isFullscreen,
      handleClick
    }
  }
})
</script>

<style scoped>
</style>